<!DOCTYPE html>
<html>
<head>
    <title>Position-Time Graph</title>
</head>
<body>
    <canvas id="physicsCanvas"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');
        
        canvas.width = 600;
        canvas.height = 400;
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Style and Coordinates ---
        const color = '#505050'; // A medium-dark gray for a monochrome, faded look
        const origin = { x: 60, y: 230 };
        const axisXEnd = 580;
        const axisYEnd = 40;

        // --- Draw Axes ---
        ctx.strokeStyle = color;
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        // Y-axis (vertical)
        ctx.moveTo(origin.x, origin.y + 120);
        ctx.lineTo(origin.x, axisYEnd);
        // X-axis (horizontal)
        ctx.moveTo(origin.x, origin.y);
        ctx.lineTo(axisXEnd, origin.y);
        ctx.stroke();
        
        // --- Draw Axis Labels ---
        ctx.fillStyle = color;
        ctx.font = 'italic 20px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Faint 't' on the horizontal axis, as seen in the original
        ctx.fillText('t', axisXEnd - 20, origin.y + 20);
        
        // Ambiguous 'A' label at the top of the y-axis, rendered faintly to match the source
        ctx.save();
        ctx.fillStyle = '#999999';
        ctx.font = 'bold 24px serif';
        ctx.fillText('A', origin.x + 5, axisYEnd - 15);
        ctx.restore();
        
        // --- Draw the Curve ---
        ctx.strokeStyle = color;
        ctx.lineWidth = 2.5;
        ctx.beginPath();

        const p_start = { x: origin.x, y: origin.y };
        const p_B = { x: 220, y: 80 }; 
        const p_D = { x: 380, y: origin.y };
        const p_F_end = { x: 550, y: 290 };

        ctx.moveTo(p_start.x, p_start.y);
        // Segment 1: start to B (peak)
        ctx.bezierCurveTo(p_start.x + 70, p_B.y, p_B.x - 70, p_B.y, p_B.x, p_B.y);
        // Segment 2: B to D (axis crossing)
        ctx.bezierCurveTo(p_B.x + 70, p_B.y, p_D.x - 70, p_D.y, p_D.x, p_D.y);
        // Segment 3: D to the end point
        ctx.bezierCurveTo(p_D.x + 60, p_F_end.y + 20, p_F_end.x - 60, p_F_end.y, p_F_end.x, p_F_end.y);
        ctx.stroke();

        // --- Draw Points and Labels ---
        function drawPoint(p, label, labelPos, angleRad = 0) {
            // Draw an elongated mark for the point, mimicking the original style
            ctx.save();
            ctx.beginPath();
            ctx.translate(p.x, p.y);
            ctx.rotate(angleRad);
            ctx.moveTo(-4, 0);
            ctx.lineTo(4, 0);
            ctx.lineWidth = 4;
            ctx.lineCap = 'round';
            ctx.strokeStyle = color;
            ctx.stroke();
            ctx.restore();
            
            // Draw the text label for the point
            ctx.fillStyle = color;
            ctx.font = 'bold 24px serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            let dx = 0, dy = 0;
            if (labelPos === 'above') dy = -25;
            if (labelPos === 'below') dy = 28;
            if (labelPos === 'above-left') { dx = -20; dy = -20; }
            if (labelPos === 'above-right') { dx = 22; dy = -20; }
            if (labelPos === 'below-right') { dx = 22; dy = 28; }
            
            ctx.fillText(label, p.x + dx, p.y + dy);
        }

        // Define coordinates, label positions, and approximate tangent angles (in radians) for each point
        const points = {
            A: { p: { x: 125, y: 150 }, labelPos: 'above-left', angle: 0.6 },
            B: { p: { x: 220, y: 80 }, labelPos: 'above', angle: 0 },
            C: { p: { x: 300, y: 150 }, labelPos: 'above-right', angle: -0.8 },
            D: { p: { x: 380, y: 230 }, labelPos: 'below', angle: -1.0 },
            E: { p: { x: 460, y: 282 }, labelPos: 'below-right', angle: -0.4 },
            F: { p: { x: 530, y: 290 }, labelPos: 'below', angle: -0.1 }
        };

        drawPoint(points.A.p, 'A', points.A.labelPos, points.A.angle);
        drawPoint(points.B.p, 'B', points.B.labelPos, points.B.angle);
        drawPoint(points.C.p, 'C', points.C.labelPos, points.C.angle);
        drawPoint(points.D.p, 'D', points.D.labelPos, points.D.angle);
        drawPoint(points.E.p, 'E', points.E.labelPos, points.E.angle);
        drawPoint(points.F.p, 'F', points.F.labelPos, points.F.angle);
    </script>
</body>
</html>